<template>
    <div class="card mb-3">
        <div class="card-header">
            公众号选择
        </div>
        <div class="card-body">
            <div class="form-group">
                <label>微信公众号</label>
                <select class="form-control" v-model="wechat_id"
                        size="3"
                >
                    <option v-for="(wechat) in wechats" :key="wechat.id" :value="wechat.id" name="">{{wechat.title}}
                    </option>
                </select>
            </div>
        </div>
        <div class="card-footer text-muted">

        </div>
    </div>

</template>
<script>
    export default {
        props: {
            id: {type: Number, default: 0}
        },
        data() {
            return {
                wechats: [],
                wechat_id: this.id,
            }
        },
        mounted() {
            this.getWechats()
        },
        watch: {
            wechat_id(newVal) {
                this.$emit('update:id', newVal)
            },
            //props应该是只在渲染dom时，触发一次。所以在异步更新props时还是vue组件id异步更新之前的数据。
            id(val) {
                this.wechat_id = val;
            }
        },
        methods: {
            async getWechats() {
                this.wechats = await this.axios.get(`wechat/rule/wechat`);
            },


        },


    }
</script>
